<template>
  <div>
    <!-- $pre是指地址前缀 -->
    <van-image width="375.33" :src="$pre + info.img" />
    <div class="p">名称：{{ info.goodsname }}</div>
    <div class="p">价格：{{ info.price }}</div>
    <div class="p">数量：{{ info.number }}</div>

    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        @click="$router.push('/index/shop')"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        type="warning"
        @click="show = true"
        text="加入购物车"
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="$router.push('/index/shop')"
      />
    </van-goods-action>

    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ minHeight: '30%' }">
      <van-image width="60" :src="$pre + info.img" />
      <div class="p">名称：{{ info.goodsname }}</div>
      <div class="p">单价：{{ info.price }}</div>
      <i></i>
      <h4 class="text-primary h3">{{ info.specsname }}</h4>
      <van-button
        v-for="(item, index) in info.specsattr"
        :key="item"
        :type="index === n ? 'primary' : 'default'"
        @click="n = index"
        >{{ item }}</van-button
      >
      <hr />
      <van-button type="primary" @click="addShop">加入购物车</van-button>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqAddShop, reqDetail } from "../../http/api";
export default {
  data() {
    return {
      info: {},
      show: false,
      n: 0,
    };
  },
  mounted() {
    reqDetail({
      id: this.$route.params.id,
    }).then((res) => {
      console.log(res);
      this.info = res.data.list[0];
      this.info.specsattr = this.info.specsattr.split(",");
    });
  },
  methods: {
    addShop() {
      reqAddShop({
        uid: JSON.parse(localStorage.getItem("isLogin")).uid,
        goodsid: this.$route.params.id,
        num: 1,
      }).then((res) => {
        if (res.data.code === 200) {
          Toast(res.data.msg);
          this.show = false;
        }
      });
    },
  },
};
</script>

<style lang="less">
@import "../../less/index.less";
img {
  width: 100vw;
}

.van-goods-action-button--danger {
  background: @primary !important;
}
.van-button--primary {
  background-color: @light;
}
.p {
  color: @primary;
}
</style>